import { createRouter, createWebHashHistory } from "vue-router";
import HomeView from "../views/Home/HomeView.vue";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth";

const routes = [
  {
    path: "/",
    redirect: "home",
  },
  {
    path: "/home",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About/AboutView.vue"),
  },
  {
    path: "/shop",
    name: "shop",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Shop/ShopView.vue"),
  },
  {
    path: "/team",
    name: "team",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Team/TeamView.vue"),
  },
  {
    path: "/blog",
    name: "blog",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Blog/BlogView.vue"),
  },
  {
    path: "/contact",
    name: "contact",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/Contact/ContactView.vue"
      ),
  },
  {
    path: "/personal",
    name: "personal",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/PersonalCenter/PersonalCenter.vue"
      ),
    children: [
      {
        path: "/personalInfo",
        name: "personalInfo",
        component: () =>
          import(
            /* webpackChunkName: "about" */ "../views/PersonalCenter/PersonalInfo/PersonalInfo.vue"
          ),
      },
      {
        path: "/accountSetting",
        name: "accountSetting",
        component: () =>
          import(
            /* webpackChunkName: "about" */ "../views/PersonalCenter/AccountSeet/AccountSetting.vue"
          ),
      },
      {
        path: "/message",
        name: "message",
        component: () =>
          import(
            /* webpackChunkName: "about" */ "../views/PersonalCenter/Message/MessageView.vue"
          ),
      },
    ],
  },
  {
    path: "/order",
    name: "order",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/MyOrder/MyOrder.vue"),
  },
  {
    path: "/orderDetail",
    name: "orderDetail",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/MyOrder/orderDetail.vue"
      ),
  },
  {
    path: "/favorite",
    name: "favorite",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/Favorite/FavoriteView.vue"
      ),
  },
  {
    path: "/cart",
    name: "cart",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Cart/CartView.vue"),
  },
  {
    path: "/payOrder",
    name: "payOrder",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/PayOrder/OrderInfo.vue"),
  },
  {
    path: "/payPage",
    name: "payPage",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/PayOrder/payOrderPage.vue"
      ),
  },
  {
    path: "/commodity",
    name: "commodity",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/Commodity/CommodityDetail.vue"
      ),
  },
  {
    path: "/register",
    name: "register",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/Register/RegisterView.vue"
      ),
  },
  {
    path: "/login",
    name: "login",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Login/LoginView.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 页面跳转时加载进度条
router.beforeEach((to, from, next) => {
  NProgress.start(); // 显示进度条
  next();
});

router.afterEach(() => {
  NProgress.done(); // 完成进度条
});
export default router;
router.beforeEach((to, from, next) => {
  if (to.meta.auth) {
    // 判断要访问的组件是否需要登录
    if (localStorage.getItem("user")) {
      next(); // 判断我们保存用户信息的位置 如果有值就放行
    } else {
      next({
        path: "/login", // 没有值九跳转到登录页
      });
    }
  }

  next(); // 必须调用next()方法  不调用会夯住
});
